<template>
  <view class="page" v-if="planInfo">
    <view class="background">
      <image class="icon" :src="roundIcon"></image>
    </view>
    <view class="content">
      <view class="header">
        <view class="left" @click="() => changePlan('toggleSchedule')">
          <!--					词库名称-->
          <view class="vocabulary-name">{{ planInfo.thesaurusName }}</view>
          <image class="exchange-icon" :src="exchangeIcon"></image>
        </view>
        <view class="right" @click="() => changePlan('modifyCurrent')">
          <view class="btn">
            <text>更改计划</text>
          </view>
        </view>
      </view>
      <view class="learning-process">
        <!--				当前背到多少天-->
        <view class="current-days">
          <view style="font-size: 30rpx; color: #63676b">Day</view>
          <view style="font-size: 40rpx; color: #f3991f">{{ numberUtils.padZero(planInfo.currentDay) }}</view>
        </view>
        <view class="right">
          <!--					总共要背多少天-->
          <view class="total-days">{{ planInfo.backedDay }}天带背计划</view>
          <!--					进度条-->
          <view class="process-bar">
            <view
              class="content"
              :style="{ width: `${(currentStudyingUnitInfo.currentStudyNum / currentStudyingUnitInfo.wordNumber) * 100}%` }"
            ></view>
          </view>
          <!--					今日学习任务-->
          <view class="today-task"
            >今日学习任务：{{ `${currentStudyingUnitInfo.currentStudyNum} / ${currentStudyingUnitInfo.wordNumber}` }}</view
          >
        </view>
      </view>

      <view class="app-list">
        <view class="app-item" @click="goToStudy">
          <image class="icon" :src="bookIcon"></image>
          <view class="text">单词学习</view>
        </view>

        <view
          class="app-item"
          @click="
            () =>
              $refs.daiBeiAlert.checkAvailable(planInfo.thesaurusId, planInfo.jumpPaidPage).then((res) => {
                if (res) {
                  $uni.navigateTo({
                    url: handleUrlParams('/vocabulary/pages/daiBei/audio/index', {
                      audioUrl: encodeURIComponent(currentStudyingUnitInfo.audioUrl),
                      posterImage: encodeURIComponent(currentStudyingUnitInfo.audioRelatedFile),
                    }),
                  })
                }
              })
          "
        >
          <image class="icon" :src="headPhoneIcon"></image>
          <view class="text">音频带背</view>
        </view>

        <view
          class="app-item"
          @click="
            () =>
              $refs.daiBeiAlert.checkAvailable(planInfo.thesaurusId, planInfo.jumpPaidPage).then((res) => {
                if (res) {
                  $uni.navigateTo({
                    url: handleUrlParams('/vocabulary/pages/daiBei/video/index', {
                      videoUrl: encodeURIComponent(currentStudyingUnitInfo.videoUrl),
                      posterImage: encodeURIComponent(currentStudyingUnitInfo.videoRelatedFile),
                    }),
                  })
                }
              })
          "
        >
          <image class="icon" :src="videoIcon"></image>
          <view class="text">视频带背</view>
        </view>

        <view
          class="app-item"
          @click="
            () =>
              $refs.daiBeiAlert.checkAvailable(planInfo.thesaurusId, planInfo.jumpPaidPage).then((res) => {
                if (res) {
                  $uni.navigateTo({
                    url: handleUrlParams('/vocabulary/pages/daiBei/documentDownload/index', {
                      fileUrl: encodeURIComponent(currentStudyingUnitInfo.videoRelatedFile),
                    }),
                  })
                }
              })
          "
        >
          <image class="icon" :src="downloadIcon"></image>
          <view class="text">资料下载</view>
        </view>
      </view>

      <!--			单元列表-->
      <view class="uni-list">
        <view class="header">
          <view class="title">
            <view class="point"></view>
            <view class="text">学习目录</view>
          </view>
          <!--					重置按钮-->
          <view class="reset-btn" @click="handleResetPlan">
            <image class="icon" :src="resetIcon"></image>
            <view class="text">重置记录</view>
          </view>
        </view>
        <view class="content">
          <view class="item" v-for="item in vocabularyUnitList" :key="item.currentDay">
            <image class="book-icon" :src="bookFillIcon"></image>
            <!--						第几天-->
            <view style="margin-left: 10rpx; font-size: 32rpx">
              <text style="color: #63676b">Day</text>
              <text style="margin-left: 10rpx; color: #31bc84">{{ item.currentDay }}</text>
            </view>
            <!--						单元标题-->
            <!--            <view class="unit-title" v-if="item.currentDay === planInfo.currentDay || item.currentStudyNum > 0">{{-->
            <!--              `当前已学 ${item.currentStudyNum} / ${item.wordNumber} 词`-->
            <!--            }}</view>-->
            <!--            <view class="unit-title" v-else>{{ `共 ${item.wordNumber} 词` }}</view>-->
            <view class="unit-title">{{ `共 ${item.currentStudyNum} / ${item.wordNumber} 词` }}</view>
            <!--						当前在学提示-->
            <view class="current-study-tip" v-if="item.currentDay === planInfo.currentDay">当前在学</view>
            <!--						前往按钮-->
            <!--						当前正在学的无前往按钮-->
            <view class="goto-btn" @click="() => switchDays(item.currentDay)" v-else>
              <!--							已完成 icon-->
              <image class="icon" :src="finishedIcon" v-if="item.isComplete === 1"></image>
              <text>前往</text>
            </view>
          </view>
        </view>
      </view>

      <view class="bottom-tips">
        <text class="text">- 完成后可【重置】反复背记 -</text>
      </view>
    </view>

    <tipPopups ref="tipPopups"></tipPopups>
    <daiBeiAlert ref="daiBeiAlert"></daiBeiAlert>
  </view>
</template>

<script>
import exchangeIcon from "./assets/exchange.svg"
import roundIcon from "./assets/round-icon.png"
import bookIcon from "./assets/book.png"
import downloadIcon from "./assets/download.png"
import headPhoneIcon from "./assets/headPhone.png"
import videoIcon from "./assets/video.png"
import bookFillIcon from "./assets/book_fill.png"
import finishedIcon from "./assets/finished_btn.png"
import tipPopups from "./components/tipPopups.vue"
import store from "@/store"
import { vocabularyLearningActionType } from "@/store/modules/vocabularyLearning"
import request from "@/utils/request"
import numberUtils from "@/utils/numberUtils"
import { cloneDeep, getShowImage, handleUrlParams, showModalPromise, showToast } from "@/utils"
import daiBeiAlert from "@/components/daiBeiAlert.vue"
import { userActionType } from "@/store/modules/user"
import urlUtils from "@/utils/urlUtils"
import resetIcon from "./assets/reset.png"

export default {
  computed: {
    numberUtils() {
      return numberUtils
    },
    planInfo() {
      return store.getters[vocabularyLearningActionType.getters.planInfo]
    },
    currentStudyingUnitInfo() {
      return this.vocabularyUnitList.find((item) => item.currentDay === this.planInfo.currentDay)
    },
  },
  methods: {
    handleUrlParams,
    async init() {
      await store.dispatch(vocabularyLearningActionType.actions.planInfo, { showLoading: true })
      // 如果不是带背的词库则跳转到普通的计划页面
      if (this.planInfo.thesaurusCategory !== "Racked") {
        uni.redirectTo({
          url: "/vocabulary/pages/currentPlanInfo/index",
        })
        return
      }
      await this.getDaiBeiPlanInfo()
      await this.getCurrentDayInfo()
    },
    //更改计划
    changePlan(currentTab) {
      uni.navigateTo({
        url: handleUrlParams("/vocabulary/pages/makeLearningPlan/schedule", {
          currentTab: currentTab,
        }),
      })
    },
    async goToStudy() {
      if (!(await this.$refs.daiBeiAlert.checkAvailable(this.planInfo.thesaurusId, this.planInfo.jumpPaidPage))) {
        return
      }
      uni.navigateTo({
        url: handleUrlParams("/vocabulary/pages/learning/daiBei", {
          backedPlanId: this.currentStudyingUnitInfo.backedPlanId,
          currentStudyNum: this.currentStudyingUnitInfo.currentStudyNum,
        }),
      })
    },
    // 获取带背计划信息
    async getDaiBeiPlanInfo() {
      this.vocabularyUnitList = await request({
        url: "thesaurus/getBackedPlanDetails",
        data: {
          thesaurusId: this.planInfo.thesaurusId,
          planId: this.planInfo.planId,
        },
        showLoading: true,
        errorHandle: true,
      })
    },
    // 获取某天的单元信息（切换单元）
    async switchDays(day) {
      await this.$refs.tipPopups.open(this.planInfo.currentDay, day)
      await this.getCurrentDayInfo(day)
    },
    async getCurrentDayInfo(day = this.planInfo.currentDay) {
      const data = await request({
        url: "thesaurus/getBackedCurrentDayInfo",
        data: {
          thesaurusId: this.planInfo.thesaurusId,
          currentDay: day,
          planId: this.planInfo.planId,
        },
        showLoading: true,
        errorHandle: true,
      })
      this.planInfo.currentDay = day
      // 赋值资料信息给当前单元
      for (let dataKey in data) {
        this.currentStudyingUnitInfo[dataKey] = data[dataKey]
      }
    },
    // 重置计划
    async handleResetPlan() {
      try {
        await showModalPromise({
          title: "提示",
          content: "确定要重置当前的学习进度吗？",
        })
        await request({
          url: "userCheckPlan/resetPlan",
          data: {
            planId: this.planInfo.planId,
          },
          showLoading: true,
        })
        await this.init()
        showToast.default("重置成功")
      } catch (e) {
        console.log(e, "e")
      }
    },
  },
  data() {
    return {
      exchangeIcon,
      roundIcon,
      bookIcon,
      downloadIcon,
      headPhoneIcon,
      videoIcon,
      bookFillIcon,
      finishedIcon,
      resetIcon,
      vocabularyUnitList: [],
      // 页面查询参数
      vocabularyDetail: {
        thesaurusId: "",
        examId: "",
        jumpPaidPage: "",
      },
    }
  },
  async onShow() {
    // 点击词库进来
    const vocabularyDetail = store.getters[vocabularyLearningActionType.getters.vocabularyDetail]
    if (vocabularyDetail) {
			this.vocabularyDetail = cloneDeep(vocabularyDetail)
    }
		store.commit(vocabularyLearningActionType.mutations.vocabularyDetail, null)
    // 如果是分享进来
    if (this.vocabularyDetail.thesaurusId) {
      try {
        uni.showLoading({
          title: "加载中",
        })
        // 检查考试是否匹配
        const examInfo = await store.dispatch(userActionType.action.examInfo)
        if (!examInfo || examInfo.examId.toString() !== this.vocabularyDetail.examId.toString()) {
          // 自动切换到对应的考试
					try {
						await request({
							url: "exam/saveUserSelectExam",
							data: {
								examId: this.vocabularyDetail.examId,
							},
						})
					} catch (e) {
						console.log(e, "e")
					}
        }
        //检查是否存在相同词汇的计划
        let boolean = await request({
          url: "userCheckPlan/existPlan",
          data: {
            examId: this.vocabularyDetail.examId,
            thesaurusId: this.vocabularyDetail.thesaurusId,
          },
        })
        uni.hideLoading()
        if (!boolean) {
          // 跳转到词库选择界面
					store.commit(vocabularyLearningActionType.mutations.vocabularyDetail, this.vocabularyDetail)
					uni.redirectTo({
						url: "/vocabulary/pages/makeLearningPlan/addPlan",
					})
          return
        }
      } catch (e) {
        uni.hideLoading()
        console.log(e, "error")
        showToast.default(e)
      }
    }
    await this.init()
  },
  components: { tipPopups, daiBeiAlert },
  // 配置右上角分享
  onShareAppMessage() {
    const page = urlUtils.parseUrl(urlUtils.getCurrentPageUrl())
    return {
      title: this.planInfo.shareTitle,
      imageUrl: getShowImage(this.planInfo.sharePoster),
      path: handleUrlParams(page.path, {
        ...page.query,
        thesaurusId: this.planInfo.thesaurusId,
        examId: this.planInfo.examId,
        jumpPaidPage: encodeURIComponent(this.planInfo.jumpPaidPage),
      }),
    }
  },
}
</script>

<style scoped lang="scss">
.page {
  position: relative;
  > .background {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 368rpx;
    background: #3cc98f;
    > .icon {
      position: absolute;
      right: 0;
      top: 0;
      width: 200rpx;
      height: 95.12rpx;
    }
  }
  > .content {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    padding: {
      left: 30rpx;
      right: 30rpx;
      top: 40rpx;
      bottom: calc(40rpx + env(safe-area-inset-bottom));
    }
    > .header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      > .left {
        display: flex;
        align-items: center;
        width: 0;
        flex: 1;
        > .vocabulary-name {
          font-size: 36rpx;
          color: #fff;
          font-weight: bold;
          // 文本溢出自动加省略号
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        > .exchange-icon {
          width: 40rpx;
          height: 40rpx;
          margin-left: 10rpx;
        }
      }
      > .right {
        margin-left: 20rpx;
        > .btn {
          font-size: 32rpx;
          color: white;
          padding: 10rpx 40rpx;
          border: 2rpx solid white;
          border-radius: 33rpx;
          display: flex;
          align-items: center;
        }
      }
    }
    > .learning-process {
      margin-top: 40rpx;
      display: flex;
      align-items: center;
      height: 110rpx;
      > .current-days {
        background: white;
        border-radius: 10rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 110rpx;
        height: 100%;
      }
      > .right {
        width: 0;
        flex: 1;
        margin-left: 30rpx;
        color: white;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
        > .total-days {
          font-size: 30rpx;
        }
        > .process-bar {
          width: 100%;
          height: 6rpx;
          border-radius: 3rpx;
          background: #b7e4d2;
          position: relative;
          overflow: hidden;
          > .content {
            background: #f3991f;
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            border-radius: 3rpx;
          }
        }
        > .today-task {
          font-size: 28rpx;
        }
      }
    }
    > .app-list {
      margin-top: 40rpx;
      background: white;
      border-radius: 20rpx;
      box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.14);
      padding: 20rpx;
      display: flex;
      justify-content: space-around;
      position: relative;
      // 在左上角绘制一个三角形
      &::before {
        content: "";
        position: absolute;
        left: calc((110rpx / 2) - (50rpx / 2));
        top: -20rpx;
        width: 0;
        height: 0;
        border-left: 25rpx solid transparent;
        border-right: 25rpx solid transparent;
        border-bottom: 50rpx solid white;
      }
      > .app-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        > .icon {
          width: 50rpx;
          height: 50rpx;
        }
        > .text {
          font-size: 30rpx;
          color: #63676b;
          margin-top: 10rpx;
        }
      }
    }
    > .uni-list {
      margin-top: 50rpx;
      > .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        > .title {
          display: flex;
          align-items: center;
          > .point {
            width: 10rpx;
            height: 30rpx;
            border-radius: 5rpx;
            background: #2cb980;
          }
          > .text {
            font-size: 34rpx;
            font-weight: bold;
            margin-left: 14rpx;
          }
        }
        > .reset-btn {
          padding: 5rpx 20rpx;
          display: flex;
          align-items: center;
          border: 2rpx solid #125c3e;
          border-radius: 25rpx;
          > .icon {
            width: 28rpx;
            height: 28rpx;
          }
          > .text {
            margin-left: 10rpx;
            font-size: 26rpx;
            color: #125c3e;
          }
        }
      }
      > .content {
        margin-top: 20rpx;
        > .item {
          display: flex;
          align-items: center;
          padding: 20rpx 0;
          border-bottom: 2rpx solid rgba(0, 0, 0, 0.14);
          > .book-icon {
            width: 40rpx;
            height: 40rpx;
          }
          > .unit-title {
            width: 0;
            flex: 1;
            // 文本溢出自动加省略号
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-left: 24rpx;
            font-size: 30rpx;
          }
          > .current-study-tip {
            color: var(--text-color-theme);
            font-size: 30rpx;
          }
          > .goto-btn {
            padding: 5rpx 14rpx;
            font-size: 28rpx;
            border-radius: 25rpx;
            border: 2rpx solid rgba(136, 136, 136, 1);
            color: rgba(136, 136, 136, 1);
            position: relative;
            > .icon {
              position: absolute;
              width: 24rpx;
              height: 24rpx;
              right: -8rpx;
              top: -8rpx;
              background: white;
              border-radius: 50%;
            }
          }
        }
      }
    }

    > .bottom-tips {
      margin-top: 30rpx;
      text-align: center;
      color: #888888;
      font-size: 30rpx;
    }
  }
}
</style>
